import React, { FC, memo, useCallback } from 'react';
import { Button, WingBlank, WhiteSpace } from 'antd-mobile';
import { timeFormat } from '@/utils';
import { IHouseInfoProps } from '@/interface';

const Banner: FC<IHouseInfoProps> = props => {
  const { detail, btnClick, order } = props;

  const handleOrder = useCallback(
    (id: string | number | undefined) => {
      btnClick(id);
    },
    [btnClick],
  );

  const renderBtn = useCallback(() => {
    if (!order?.id) {
      return (
        <Button
          className="info-btn"
          type="warning"
          onClick={() => handleOrder(undefined)}
        >
          预定
        </Button>
      );
    }
    if (order?.isPayed === 0) {
      return (
        <Button
          className="info-btn"
          type="ghost"
          onClick={() => handleOrder(order?.id)}
        >
          取消预定
        </Button>
      );
    }

    // 已经有订单了，处于已支付状态
    if (order?.isPayed === 1) {
      return (
        <Button className="info-btn" type="ghost">
          居住中
        </Button>
      );
    }
  }, [order]);

  return (
    <div className="info">
      <WhiteSpace />
      <WingBlank size="md">
        <div className="info-title item">{detail?.name}</div>
        <div className="info-msg item">简介: {detail?.info}</div>
        <div className="info-price item">价格: ￥{detail?.price}</div>
        <div className="info-time item">
          发布时间: {timeFormat(detail?.publishTime, 'all')}
        </div>
        <div className="info-time item">
          开始出租: {timeFormat(detail?.startTime)}
        </div>
        <div className="info-time item">
          结束出租: {timeFormat(detail?.endTime)}
        </div>
        <WhiteSpace />
        {renderBtn()}
      </WingBlank>
      <WhiteSpace />
    </div>
  );
};

export default memo(Banner);
